<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MVVM模式演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- View层 - 用户界面 -->
      <h2>MVVM模式演示</h2>
      <input v-model="userInput" placeholder="输入内容" />
      <p>你输入的内容：{{ userInput }}</p>
      <p>字符长度：{{ inputLength }}</p>
      <button @click="clearInput">清空</button>
    </div>

    <script>
      const { createApp, ref, computed } = Vue

      // ViewModel层 - Vue组件
      const App = {
        setup() {
          // Model层 - 数据模型
          const userInput = ref('')

          // 计算属性
          const inputLength = computed(() => userInput.value.length)

          // 方法
          const clearInput = () => {
            userInput.value = ''
          }

          return {
            userInput,
            inputLength,
            clearInput
          }
        }
      }

      // 创建Vue实例并挂载
      const vm = createApp(App).mount('#app')

      // 在控制台中可以通过 vm.$data 访问数据
      console.log('Vue实例已创建，可在控制台通过vm访问')
    </script>
  </body>
</html>
